<!DOCTYPE html>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<html class="win-frame">
<head>
<title>${name_china}管理-编辑${name_china}</title>
<%@include file="/common/head.jsp" %>

</head>
<body class="iframe-page">
<div class="page-title-wrapper">
    <div class="page-title">
        <div class="page-title-text">
            <span>${name_china}管理</span>
            <span class="split"></span>
            <span>编辑${name_china}</span>
        </div>
        <a id="goBack" class="btn-return distance-left" href="javascript:;"><i class="icon icon-arrow-left"></i>返回上级</a>
    </div>
    <div class="page-title-border"></div>
</div>

<form id="form" method="post">
    <div class="form-wrapper">
	  <div class="h4 distance-double">
        <span class="h4-title"><i class="icon icon-setting"></i>基本信息</span>
        <span class="h4-border"></span>
      </div>
      
      <input type="hidden" id="id" name="id"/> 
      
      <div class="form-cont">
	        <p class="form-cont-title"><span class="field-required">*</span>视频名称</p>
	        <input type="text" id="productName" name="productName" class="summer-input summer-validatebox"  data-validatebox="validType:['required','maxLength[100]']"/> 
	     </div>
	     
	      <div class="form-cont">
	        <p class="form-cont-title">视频类别</p>
	        <input type="text" id="categoryCode" name="categoryCode" class="summer-input summer-validatebox"  data-validatebox="validType:['maxLength[100]']"/> 
	     </div>
	    
	     <div class="form-cont">
	        <p class="form-cont-title">视频简介</p>
	        <textarea class="summer-textarea" id="summary" name="summary"></textarea>
	     </div>
	     
	     <input id="items" type="hidden" name="items"/>
	     <div id="t-wrap">
	    <table class="summer-datagrid" id="dataList">
            <col width="25%">
		    <col width="25%">
		    <col width="20%">
		    <col width="10%">
		    <col width="10%">
		    <col width="10%">
		    <thead>
			    <tr>
			        <th>是否VIP</th>
			        <th>价格</th>
			        <th>视频上传</th>
			        <th>封面上传</th>
					<th>名称</th>
			        <th>操作</th>
			    </tr>
		    </thead>
		    <tbody id="dyncTr">
		        <tr>
		            <th>
		                  <input type="hidden" id="itemId0" name="itemId0"/> 
		            	  <input type="text" id="isVip0" name="isVip0" class="summer-input summer-validatebox"  data-validatebox="validType:['required','maxLength[10]']"/> 
	                </th>
		            <th>
		                 <input type="text" id="fee0" name="fee0" class="summer-input summer-validatebox"  data-validatebox="validType:['required','maxLength[10]']"/> 
		            </th>
		            <th>
		                 <input type="hidden" id="videoUrl0" name="videoUrl0" class="summer-input summer-validatebox"  data-validatebox="validType:['required','maxLength[1000]']"/> 
		            </th>
		            <th>
		                 <input type="hidden" id="image0" name="image0" class="summer-input summer-validatebox"  data-validatebox="validType:['required','maxLength[1000]']"/> 
		            </th>
		            <th>
		                 <input type="text" id="itemSummary0" name="itemSummary0" class="summer-textarea"  data-validatebox="validType:['maxLength[1000]']"/> 
		            </th>
		            <th>
		                 <img id="addCol" src="<%=request.getContextPath()%>/static/images/edit_add.png"/>
		            </th>
		        </tr>
		    </tbody>
	    </table>
     </div>
     <div class="form-btn-wrapper" id="funcbar">
        <a class="btn btn-normal" id="backBtn">关闭</a>
    </div>
  </div>
</form>
<script>
    
  var   editData,
        permission = CommonUtil.getPermission('${name_english}'),
        row=1;
    
    $(function () {
    	editData = ${editData};
    	
    	//初始化funcbar
     	$('#funcbar').prepend($.funcbar({
            type: 'button',
            data: permission,
            permit: ['${name_english}:edit']
        }));
   	 
     	//初始化下拉选项
   	   $('#categoryCode').combobox({
   		   async:false,
   	       defaultValue: editData.categoryCode,
           valueField : 'categoryCode',
           textField : 'categoryName',
           url : CONST_URL.CATEGORYS
       });
    	
	   	
        $('#form').form().form('loadDataEdit', {
            data: editData
        }); 
        
    	//回显数据
    	items = ${items};
    	
    	$("#itemId0").val("0");
    	//初始化下拉选项
		$('#isVip0').combobox({
		  async:false,
		  defaultValue:items[0].isVipVideo,
		  valueField : 'code',
		  textField : 'name',
		  url : COMMON_URL.getCode + '?type=T_DM_PRODUCT_ITEM_IS_VIP'
		});
    	
    	$("#fee0").val(items[0].fee);
    	$("#image0").val(items[0].image);
    	$("#videoUrl0").val(items[0].videoUrl);
    	
    	$("#videoUrl0").filePlugin({
    		type:"video"
    	});
    	
    	$("#image0").filePlugin({
    		type:"image"
    	});
    	
    	$("#itemSummary0").val(items[0].summary);
    	
    	for( var i=items.length-1;i>0;i-- ){
    		$("#dyncTr").append('<tr id="dyncTr'+row+'">'+
		 		      '<th>'+
		 		     		  '<input type="hidden" id="itemId'+row+'" value="0" name="itemId'+row+'"/>'+ 
			            	  '<input type="text" id="isVip'+row+'" name="isVip'+row+'" class="summer-input"/>'+ 
		              '</th>'+
			            '<th>'+
			                 '<input type="text" value="'+items[i].fee+'" id="fee'+row+'" name="fee'+row+'" class="summer-input"/>'+ 
			            '</th>'+
			            '<th>'+
			                 '<input type="hidden" value="'+items[i].videoUrl+'" id="videoUrl'+row+'" name="videoUrl'+row+'" class="summer-input"/>'+ 
			            '</th>'+
			            '<th>'+
		                 '<input type="hidden" value="'+items[i].image+'" id="image'+row+'" name="image'+row+'" class="summer-input"/>'+ 
		                '</th>'+
			            '<th>'+
			                 '<input type="text" value="'+items[i].summary+'" id="itemSummary'+row+'" name="itemSummary'+row+'" class="summer-textarea"/>'+ 
			            '</th>'+
			            '<th>'+
			                 '<img id="removeCol'+row+'" src="<%=request.getContextPath()%>/static/images/edit_remove.png" onclick="removeTr('+row+')"/>'+
			            '</th>'+
			        '</tr>');
    		       
					$("#videoUrl"+row).filePlugin({
			    		type:"video"
			    	});
					$("#image"+row).filePlugin({
			    		type:"image"
			    	});
					//初始化下拉选项
					$('#isVip'+row).combobox({
					  async:false,
					  defaultValue:items[i].isVipVideo,
					  valueField : 'code',
					  textField : 'name',
					  url : COMMON_URL.getCode + '?type=T_DM_PRODUCT_ITEM_IS_VIP'
					});
					
					row++;
    	}
    	
    	//保存按钮
    	$('#funcbar').on('click', 'a[data-permit="${name_english}:edit"]', submit);
    	
    	//返回按钮
    	$('#backBtn, #goBack').on('click',backMain);
    	
    	$('#addCol').on("click",function(){
            $("#dyncTr").append('<tr id="dyncTr'+row+'">'+
					 		      '<th>'+
					 		              '<input type="hidden" id="itemId'+row+'" name="itemId'+row+'"/>'+ 
						            	  '<input type="text" id="isVip'+row+'" name="isVip'+row+'" class="summer-input"/>'+ 
					              '</th>'+
						            '<th>'+
						                 '<input type="text" id="fee'+row+'" name="fee'+row+'" class="summer-input"/>'+ 
						            '</th>'+
						            '<th>'+
						                 '<input type="hidden" id="videoUrl'+row+'" name="videoUrl'+row+'" class="summer-input"/>'+ 
						            '</th>'+
						            '<th>'+
					                 '<input type="hidden" id="image'+row+'" name="image'+row+'" class="summer-input"/>'+ 
					                '</th>'+
						            '<th>'+
						                 '<input type="text"  value="暂无" id="itemSummary'+row+'" name="itemSummary'+row+'" class="summer-textarea"/>'+ 
						            '</th>'+
						            '<th>'+
						                 '<img id="removeCol'+row+'" src="<%=request.getContextPath()%>/static/images/edit_remove.png" onclick="removeTr('+row+')"/>'+
						            '</th>'+
						        '</tr>');	
            $("#videoUrl"+row).filePlugin({
	    		type:"video"
	    	});
			$("#image"+row).filePlugin({
	    		type:"image"
	    	});
            //初始化下拉选项
        	 $('#isVip'+row).combobox({
                valueField : 'code',
                textField : 'name',
                url : COMMON_URL.getCode + '?type=T_DM_PRODUCT_ITEM_IS_VIP'
            });
        	
            row++;
   		});
    });
    
    //移动标签
    function removeTr(roww){
    	$('#dyncTr'+roww).remove();
    	row--;
    }
    
    //表单提交
    function submit() {
    	 var items="";
    	 //获得items信息
    	 for(var i=0;i<row;i++){
    		 var temp = "";
    		 var itemId = $("#itemId"+i).val();
    		 var isVip = $("#isVip"+i).combobox("getValue");
    		 var fee = $("#fee"+i).val();
    		 var image = $("#image"+i).val();
    		 var videoUrl = $("#videoUrl"+i).val();
    		 var itemSummary = $("#itemSummary"+i).val();
    		 temp = itemId + ";" + isVip+";"+fee+";"+videoUrl+";"+image+";"+itemSummary+","
    		 items=items+temp;
    	 }
    	 items = items.substring(0,items.length-1);
    	 $("#items").val(items);
    	 
         $("#form").form({
        	 buttons : ['#saveBtn'],
             ajax: {
                 url: CONST_URL.EDIT
             },
             onSubmitSuccess: function (data) {
            	 $.stip({
   	                type:'ok',//显示类型 有info、 ok、 danger
   	                text: '保存成功！',
   	                onBeforeHide: function () {
   	                	backMain();
   	                }
            	 });
              }
         }).form("submit");
    }
    
  
    //返回主页面
    function backMain() {
    	window.location.href = CONST_URL.INIT_MAIN;
    }
    
    //请求url
    var CONST_URL = {
    	INIT_MAIN: basePath + "${common_url}init",
    	CATEGORYS: basePath + "${common_url}getCategorys",
       	EDIT: basePath + "${common_url}edit"
    };
    
</script>
</body>
</html>